<template>
  <div>
    <el-table
      ref="singleTable"
      :data="cutObj"
      height="200"
      highlight-current-row
      @current-change="handleCurrentChange"
      @row-click="handleTableRow"
      style="width: 680px; border: 1px solid #dcdfe6; margin: 100px"
    >
      <el-table-column property="eventId" width="50" v-if="false">
      </el-table-column>
      <el-table-column property="eventName" label="事件名称" width="120">
      </el-table-column>
      <el-table-column property="eventDay" label="发生日期" width="120">
      </el-table-column>
      <el-table-column
        property="regionName"
        label="发生位置"
        width="120"
      ></el-table-column>
      <el-table-column
        property="eventPrecept"
        label="防治方案"
        width="120"
      ></el-table-column>
      <el-table-column
        property="eventStage"
        label="灾情状态"
        width="180"
      ></el-table-column>
    </el-table>

    <div class="check">
      <div>
        <div style="margin: 0px 320px">
          <el-button @click="getwormById(eventId)">专家会商</el-button>
        </div>
      </div>
    </div>

    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="600px"
      :before-close="handleClose"
    >
      <h1 style="text-align: center">专家会商</h1>
      <div class="msg" style="display: flex">
        <div style="width: 300px">
          <p style="margin: 80px 30px">事件名称：{{ conList.eventName }}</p>
          <p style="margin: 80px 30px">时间： {{ conList.eventDay }}</p>
          <p style="margin: 80px 30px">发生位置：{{ conList.regionName }}</p>
          <p style="margin: 80px 30px">灾情描述{{ conList.eventDescribe }}</p>
          <p style="margin: 80px 0px">
            会商结果：
            <!-- {{ conList.consultResult }} -->

            <input
              type="textarea"
              v-model="consultResult"
              style="height: 120px"
            />
          </p>
        </div>
        <div style="width: 300px">
          <p style="margin: 50px 30px">
            灾区图片：
            <img
              :src="'/api' + conList.eventImg"
              alt="哦豁，图片找不到---瓜了"
              style="width: 220px; height: 160px"
            />
          </p>

          <p style="margin: 80px 30px">影响面积{{ conList.eventArea }}</p>

          <div style="display: flex">
            <p style="margin-top: 130px">会商人员：</p>

            <p style="width: 80px; height: 30px">
              <input
                type="button"
                value="张三"
                style="background: white; width: 80px; height: 30px"
                @click="z()"
                v-if="z1"
              />
              <br />
              <input
                type="button"
                value="李四"
                style="
                  background: white;
                  width: 80px;
                  height: 30px;
                  margin-top: 20px;
                "
                @click="l()"
                v-if="l1"
              />
              <br />
              <input
                type="button"
                value="王五"
                style="
                  background: white;
                  width: 80px;
                  height: 30px;
                  margin-top: 20px;
                "
                @click="w()"
                v-if="w1"
              />
              <br />
              <input
                type="button"
                value="赵六"
                style="
                  background: white;
                  width: 80px;
                  height: 30px;
                  margin-top: 20px;
                "
                @click="o()"
                v-if="o1"
              />
            </p>

            <p style="width: 80px; height: 30px; margin-left: 20px">
              <input
                type="button"
                value="张三"
                style="background: white; width: 80px; height: 30px"
                v-if="z2"
                @click="z3"
              />
              <br />
              <input
                type="button"
                value="李四"
                style="
                  background: white;
                  width: 80px;
                  height: 30px;
                  margin-top: 20px;
                "
                v-if="l2"
                @click="l3"
              />
              <br />
              <input
                type="button"
                value="王五"
                style="
                  background: white;
                  width: 80px;
                  height: 30px;
                  margin-top: 20px;
                "
                v-if="w2"
                @click="w3"
              />
              <br />
              <input
                type="button"
                value="赵六"
                style="
                  background: white;
                  width: 80px;
                  height: 30px;
                  margin-top: 20px;
                "
                v-if="o2"
                @click="o3"
              />
            </p>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="add()"
          style="margin-right: 20px; margin-bottom: 50px"
          >添加 会商信息</el-button
        >
        <!-- @click="addcon()" -->
        <el-button
          type="primary"
          @click="dialogVisible = false"
          style="margin-right: 200px; margin-bottom: 50px"
          >返 回</el-button
        >
      </span>

      <div>
        <el-table
          ref="singleTable"
          :data="consultBeanList"
          highlight-current-row
          height="200"
          @current-change="handleCurrentChange"
          @row-click="handleTableRow1"
          style="
            width: 380px;
            height: 223px;
            border: 1px solid #dcdfe6;
            margin: 0px auto;
          "
        >
          <el-table-column property="consultId" width="50" v-if="false">
          </el-table-column>
          <el-table-column property="consultDay" label="事件名称" width="120">
          </el-table-column>
          <el-table-column
            property="consultPeople"
            label="事件日期"
            width="130"
          >
          </el-table-column>
          <el-table-column
            property="consultResult"
            label="会商结果"
            width="120"
          >
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";

export default {
  data() {
    return {
      consultId: "",
      consultDay: "",
      consultPeople: "",
      consultResult: "",
      eventBean: "",
      eventId: "",
      eventName: "",
      eventDay: "",
      eventImg: "",
      eventStage: "",
      eventDescribe: "",
      eventFind: "",
      regionName: "",
      className: "",
      eventType: "",
      eventArea: "",
      eventAdvice: "",
      eventLose: "",
      eventPrecept: "",
      conList: [],
      consultBeanList: [],
      z1: true,
      l1: true,
      w1: true,
      o1: true,
      z2: false,
      l2: false,
      w2: false,
      o2: false,
      name1:"",
      name2:"",
      name3:"",
      name4:"",
      namelist:"",
      selections: {}, // 保存已选择过的row
      dialogVisible: false,
    };
  },
  computed: {
    ...mapState("con", ["cutObj", "param"]),
  },
  mounted() {
    this.getData();
  },
  methods: {
    ...mapMutations("con", ["setParam"]),
    ...mapActions("con", ["findByItem"]),

    get() {
      let paramObj = this.param;
      paramObj.eventStage = this.eventStage;
      // 把最新的信息装入 store中的 param对象中
      this.setParam(paramObj);
      console.log(paramObj);
      this.findByItem();
    },
    async getwormById(eventId) {
      let paramobj = { eventId: eventId };

      let conObj = await this.ajax.getSubmit(
        "/api/consult/findEvent",
        paramobj
      );

      console.log(conObj);

      this.conList = conObj;

      let eventObj = await this.ajax.getSubmit(
        "/api/event/findConsult",paramobj
      );

      this.consultBeanList = eventObj.consultBeanList

      console.log(this.consultBeanList)

      this.dialogVisible = true;
    },

    handleCurrentChange(val) {
      this.currentRow = val;
      console.val;
    },
    handleTableRow(row) {
      console.log(row.eventId);

      this.eventId = row.eventId;
    },
    handleTableRow1(row) {
      console.log(row.consultId);

      this.consultId = row.consultId;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    addWorm() {
      this.dialog = true;
    },
    async add() {

      this.consultPeople = this.name1 + ''+this.name2 + ''+this.name3 + ''+this.name4;
      
      let conobj = {
        consultPeople: this.consultPeople,
        consultResult: this.consultResult,
        eventId:this.eventId,
      };

      let Obj = await this.ajax.getSubmit("/api/consult/addConsult", conobj);

      console.log(Obj);

    console.log('====' + this.eventId)



    let upEvent ={
      eventId:this.eventId,
      consultResult: this.consultResult,
    }

      let upObj = await this.ajax.getSubmit("/api/consult/updateConsult", upEvent);


      console.log(upObj)

      if (Obj != null) {
        alert("添加成功");
      }


      this.dialog = false;

      this.getwormById(this.eventId);
    },
    // 勾选时候，记录[{id: row}, ...]
    onSelect(selection, row) {
      // if (this.selections[row.id]) {
      //   delete this.selections[row.id];
      // } else {
      //   this.selections[row.id] = row;
      // }

      if (this.selections[row.name]) {
        delete this.selections[row.name];
      } else {
        this.selections[row.name] = row;
      }

      console.log(row);
    },

    // 全选情况
    onSelectAll(selection) {
      // 全选
      if (selection.length) {
        selection.forEach((row) => {
          this.selections[row.id] = row;
        });
      } else {
        // 取消全选
        this.list.forEach((row) => {
          delete this.selections[row.id];
        });
      }
    },
    // 获取数据列表
    getData() {
      // ...
    },

    //获取选中的行的id值
    async getSelIds() {
      let selections = Object.values(this.selections);
      //由于Object.keys之后是字符串类型， 如果传递给后台的id是数字类型,需要转换过来。
      // let ids = selections.map((item) => Number(item));
      let ids = selections.map(item);
      console.log(ids);
      //如果是个别情况，获取之后需要清除选中状态的话，需要初始化一下
      // this.selections = {};
      // this.$refs.multipleTable.clearSelection();
    },

    z() {
      this.z1 = false;
      this.z2 = true;
      this.name1 = "张三" + ','
    },
    l() {
      this.l1 = false;
      this.l2 = true;
      this.name2="李四" + ','
    },
    w() {
      this.w1 = false;
      this.w2 = true;
      this.name3= "王五" + ','
    },
    o() {
      this.o1 = false;
      this.o2 = true;
      this.name4="赵六"
    },
    z3() {
      this.z2 = false;
      this.z1 = true;
      this.name1 = ""
    },
    l3() {
      this.l2 = false;
      this.l1 = true;
      this.name2=""
    },
    w3() {
      this.w2 = false;
      this.w1 = true;
       this.name3= ""
    },
    o3() {
      this.o2 = false;
      this.o1 = true;
      this.name4=""
    },

    async  getconsultResult(){



    }
  },
  created() {
    this.findByItem();
  },
};
</script>

<style>
.check {
  display: flex;
}
.check > div:first-child {
  width: 450px;
  height: 200px;
}

.check > div:nth-child(2) {
  width: 300px;
  height: 200px;
}
</style>